<template>
  <div class="itemContent" @click="handleClick({ name: 'item' })">
    <div class="topBox">
      <div class="bg" :style="{ backgroundImage: `url(${item.coverImg})` }">
      </div>
      <div class="overlay" v-if="item.registrationStatus !== 1">
        <img src="@/assets/未开始.png" v-if="item.registrationStatus == 0" />
        <img src="@/assets/已结束.png" v-if="item.registrationStatus == 2" />
        <div>{{
          [t('projectCard','报名时间未开始'), t('control','招募中'), t('projectCard','报名时间已截止')][
            item.registrationStatus
          ]
        }}</div>
      </div>
      <div v-if="needCollect">
        <img
          class="collect"
          @click.stop="handleClick({ name: '取消收藏', item })"
          v-if="item.collectFlag"
          src="@/assets/收藏3.png"
        />
        <img
          class="collect"
          @click.stop="handleClick({ name: '收藏', item })"
          v-else
          src="@/assets/收藏4.png"
        />
      </div>
    </div>
    <div class="infoBox">
      <div class="status">
        <span></span>

        <a-dropdown v-if="hasOperate">
          <EllipsisOutlined style="font-size: 20px" @click.stop="false" />
          <template #overlay>
            <a-menu>
              <a-menu-item
                :key="item.value"
                v-for="item in newStructure.more"
                @click="handleClick({ name: item.value })"
                >{{ item.label }}</a-menu-item
              >
            </a-menu>
          </template>
        </a-dropdown>
      </div>
      <div class="line">
        <a-tooltip placement="topLeft">
          <template #title>
            <span>{{ item.name }}</span>
          </template>
          <div class="name ellipsis">{{ item.name }}</div>
        </a-tooltip>
        <div class="difficulty">
          <StarFilled style="color: #f7db4d; margin-right: 5px" />{{t('projectCard','难度')}}
          {{ item?.difficulty?.toFixed(1) }}
          <!-- 难度：<a-rate :value="item.difficulty" disabled style='margin-left:3px;font-size: inherit;' /> -->
        </div>
      </div>
      <div class="type">
        <span
        style="white-space: nowrap;padding-right: 10px;"
          :style="{ color: item.recruitStatus == 0 ? '#8466F5' : '#B5ACCE', fontWeight: 500 }"
        >
          {{ item.recruitStatus == 0 ? t('control','未招满') :  t('control','已招满') }}
        </span>
        <div class="tag">
          <div class="typeBox">{{ item.categoryName }}</div>
          <div class="grade" v-if="item.grade">{{ item.grade }} {{ t('projectCard','级') }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { EllipsisOutlined, StarFilled } from '@ant-design/icons-vue'
import { ref, defineProps, defineEmits, watch } from 'vue'
import { t } from '@/i18n'

const emit = defineEmits(['handleClick'])

const { item, structure, hasOperate } = defineProps({
  item: Object,
  structure: {
    type: Array,
    default: [],
  },
  needCollect: {
    type: Boolean,
    default: true,
  },
  hasOperate: {
    type: Boolean,
    default: true,
  },
})
const newStructure = ref()
const init = () => {
  newStructure.value = {
    more: item.status
      ? [
          { label: t('projectCard', '下线'), value: '下线' },
          { label: t('projectCard', '删除项目'), value: '删除项目' },
        ]
      : [
          { label: t('projectCard', '上线'), value: '上线' },
          { label: t('projectCard', '删除项目'), value: '删除项目' },
        ],
    ...structure,
  }
}
init()
watch(
  () => item,
  () => init()
)
console.log(item.status, 'item.status')

const handleClick = ({ name }) => {
  emit('handleClick', { name, item })

  // switch (name) {
  // 	case 'itemContent':
  // 		emit('handleClick', {name, item})
  // 		break
  // 	case 'collect':
  // 		emit('handleClick', {name, item})
  // 		break
  // 	case 'more':
  // 		console.log(item.key)
  // 		emit('handleClick', {name, item})
  // 		break
  // }
}
</script>

<style lang="scss" scoped>
.itemContent {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-shadow: 0px 3px 10px 0px #e3e2ff;
  border-radius: 6px;
  overflow: hidden;
  .topBox {
    position: relative;
    width: 100%;
    height: 160px;
    .bg {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background-size: cover;
      background-position: center;
    }
    .overlay {
      width: 100%;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
      white-space: nowrap;
      text-align: center;
      margin: 0;
      img {
        width: 32px;
        margin-bottom: 5px;
        margin-top: 3px;
      }
    }
    .collect {
      cursor: pointer;
      position: absolute;
      z-index: 2;
      left: 10px;
      bottom: 10px;
      width: 24px;
      height: 24px;
    }
  }
  .infoBox {
    display: flex;
    flex-direction: column;
    padding: 13px 16px;
    .status {
      font-size: 14px;
      display: flex;
      justify-content: space-between;
    }
    .line {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .name {
      font-size: 16px;
      width: 100%;
    }
    .difficulty {
      font-size: 14px;
      display: flex;
      align-items: center;
      text-wrap: nowrap;
      margin-left: 6px;
      color: #b5acce;
    }
    .type {
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      /* .grade{
					font-weight: 500;
					font-size: 14px;
					color: #B5ACCE;
				} */
      .category {
        border-radius: 27px;
        text-align: center;
        padding: 4px 10px;
        background: #eeeeff;
        border: 1px solid #d7d5ff;
        font-weight: 500;
        font-size: 12px;
        color: #8466f5;
      }
    }
    .tag {
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 12px;
      color: #8466f5;
      .typeBox {
        padding: 6px 9px;
        background: #eeeeff;
        border-radius: 13px 0px 0px 13px;
        border: 1px solid #d7d5ff;
        border-right: none;
      }
      .grade {
        padding: 6px 9px;
        background: #eeeeff;
        border-radius: 0px 13px 13px 0px;
        border: 1px solid #d7d5ff;
      }
    }
  }
}
</style>
